<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约表管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
    <style>
        .is-selected {
            color: #1989FA;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/index.html">后台</a></span>
                </transition>
            </div>
            <el-menu :default-openeds="['1']" style="border: none;" background-color="black" text-color="#fff"
                     active-text-color="#ffd04b"
                     default-active="ordersetting"
                     class="el-menu-vertical-demo" :collapse="isCollapse">
                <a href="/page/end/index.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href="item.path" v-for="item in user.permission" :key="item.id">
                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.username}}</span>
                        <el-dropdown>
                            <img src="/files/avatar"
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>
                <el-button @click="excelInput"  type="warning">Excel的格式下载</el-button>

                <el-upload
                        name="excelFile"
                        class="upload-demo"
                        :show-file-list="true"
                        action="/files/ordersetting">
                    <el-button  type="success">Excel的导入</el-button>
                </el-upload>

                <el-button @click="excelExport" type="danger">Excel的导出</el-button>
                <el-calendar>
                    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                    <template
                            slot="dateCell"
                            slot-scope="{date, data}">
                        <el-row>
                            <el-col :span="8" style="min-height: 1px">
                                <p :class="data.isSelected ? 'is-selected' : ''" style="text-align: center">
                                    {{ data.day.split('-').slice(1).join('-') }}
                                </p>
                            </el-col>
                        </el-row>


                        <!-- dates.indexOf(data.day)>=0-->


                        <div v-if="date>today && date<= nday">
                            <el-row>
                                <el-col :span="6" style="min-height: 1px">
                                </el-col>
                                <el-col :span="12">

                                    <div class="grid-content bg-purple" v-if="dates.indexOf(data.day)>=0">
                                        <!--可预约{{timeData[dates.indexOf(data.day)].number)}}人-->
                                        <span style="color: darkgreen">可预约{{timeData[dates.indexOf(data.day)].number}}</span><br>

                                        <!--{{timeData[dates.indexOf(data.day)].number}}-->
                                        <!--{{dates.indexOf(data.day)}}-->
                                        <span style="color:red;">已预约{{timeData[dates.indexOf(data.day)].reservations}}人</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">

                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="15" style="min-height: 1px">

                                </el-col>
                                <el-col :span="9">
                                    <div>
                                        <el-button @click="settingPopBtn(data.day)"
                                                   type="primary" size="mini">设置
                                        </el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-calendar>
            </el-main>


            <el-dialog title="预约日期" :visible.sync="dialogFormVisible" width="20%">
                <el-form :model="orderstting">
                    <el-form-item label="预约日期" :label-width="formLabelWidth">
                        {{orderstting.orderDate}}
                    </el-form-item>
                    <el-form-item label="预约人数" :label-width="formLabelWidth">
                        <el-input v-model="orderstting.number"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrdersettingBtn">确 定</el-button>
                </div>
            </el-dialog>
        </el-container>
    </el-container>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>
<script src="../../js/base.js"></script>
<script src="../../js/axios-0.18.0.js"></script>

<script>

    let urlBase = "/api/ordersetting/";
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            entity: {},
            isCollapse: false,
            search: '',
            props: [{"label": "编号", "prop": "id"}, {"label": "名称", "prop": "name"}, {
                "label": "可预约人数",
                "prop": "number"
            }, {"label": "约预日期", "prop": "orderDate"}, {"label": "已预约人数", "prop": "reservations"}],

            //今天的日期
            today: new Date(),

            // 6天后的日期
            nday: new Date(new Date().getTime() + 60 * 60 * 1000 * 24 * 6),
            orderstting: {},
            timeData: [],
            dates: []
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.loadTable();
            this.loadTime()

        },
        methods: {
            loadTime() {
                axios.get("/api/ordersetting/enableOrdersetting").then(res => {
                    console.log(res.data.data)
                    this.timeData = res.data.data
                    for (let i = 0; i < this.timeData.length; i++) {
                        this.dates.push(this.timeData[i].orderDate)
                    }
                    console.log(this.timeData[this.dates.indexOf(this.dates[1])].number);
                })
            },
            excelInput(){

            },
            excelExport(){

            },
            addOrdersettingBtn() {
                // axios.post("/api/ordersetting", this.orderstting).then(res => {
                axios.post("/api/ordersetting/updateByOrders", this.orderstting).then(res => {
                        console.log(res)
                    }
                )
                this.dialogFormVisible = false

            },
            settingPopBtn(data) {
                // console.log(this.timeData[this.dates.indexOf(data)].number)
                this.orderstting.orderDate = data
                this.dialogFormVisible = true
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            loadTable() {
                $.get(urlBase + "/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            exp() {
                window.open(urlBase + "/export");
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadTable();
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.loadTable();
            },
            add() {
                this.entity = {};
                this.dialogFormVisible = true;
            },
            save() {
                let type = this.entity.id ? "PUT" : "POST";
                $.ajax({
                    url: urlBase,
                    type: type,
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "保存成功",
                            type: "success"
                        });
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    this.dialogFormVisible = false;
                })
            },
            edit(obj) {
                this.entity = obj;
                this.dialogFormVisible = true;
            },
            del(id) {
                $.ajax({
                    url: urlBase + id,
                    type: "delete"
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "删除成功",
                            type: "success"
                        })
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>
